<script setup lang="ts">
import ImgPreview from "./components/ImgPreview.vue";
import TextPreview from "./components/TextPreview.vue";
import DocPreview from "./components/DocPreview.vue";
import PDFPreview from "./components/PDFPreview.vue";
import PptPreview from "./components/PptPreview.vue";
import ExcelPreview from "./components/ExcelPreview.vue";
import VideoPreview from "./components/VideoPreview.vue";
import AudioPreview from "./components/AudioPreview.vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  row: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(["update:modelValue"]);
/**
 * 关闭
 */
const closed = () => {
  comp.compName = "";
  emits("update:modelValue", false);
};
const val = computed(() => props.modelValue);

const comp: any = ref({});

watch(
  props,
  (newVal) => {
    if (newVal) {
      let row = newVal.row;
      comp.value = { ...row };
      if (["png", "jpg", "jpeg", "bmp", "gif"].includes(row?.fileType)) {
        comp.value.compName = ImgPreview;
      } else if (["doc", "docx"].includes(row?.fileType)) {
        comp.value.compName = DocPreview;
      } else if (["js", "txt"].includes(row?.fileType)) {
        comp.value.compName = TextPreview;
      } else if (["pdf"].includes(row?.fileType)) {
        comp.value.compName = PDFPreview;
      } else if (["ppt", "pptx"].includes(row?.fileType)) {
        comp.value.compName = PptPreview;
      } else if (["xls", "xlsx"].includes(row?.fileType)) {
        comp.value.compName = ExcelPreview;
      } else if (
        [
          "mp4",
          "m2v",
          "mkv",
          "rmvb",
          "wmv",
          "avi",
          "flv",
          "mov",
          "m4v",
        ].includes(row?.fileType)
      ) {
        comp.value.compName = VideoPreview;
      } else if (["mp3", "wav", "wmv"].includes(row?.fileType)) {
        comp.value.compName = AudioPreview;
      } else {
      }
      // console.log("comp.value", comp.value);
    }
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <div v-if="val">
    <component :is="comp.compName" :comProps="comp" @close="closed"></component>
  </div>
</template>

<style lang="scss" scoped></style>
